<template>
	<view class="">
		<!-- 	<swiper class="swiper"  style="height: 450rpx;" :indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">
					<image style="height: 400px;" mode="scaleToFill" :src="src" @error="imageError"></image>
				</view>
			</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-red">
				<image style="height: 400px;" mode="scaleToFill" :src="src" @error="imageError"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-red">
				<image style="height: 400px;" mode="scaleToFill" :src="src" @error="imageError"></image>
			</view>
		</swiper-item>
		</swiper> -->

		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper style="height: 450rpx;" class="swiper-box" @change="change">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item"><image style="height: 400px;" mode="scaleToFill" :src="src" @error="imageError"></image></view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<view class="header-text fe j-e">
			<view class="text-box" scroll-y="true">
				<text
					class="t-w-h"
					style="color: #333;width: 70%;
							font-size: 45rpx;
							font-weight: 600;"
				>
					途虎养车工场店（杭州西湖大\n道店）
				</text>
			</view>
			<view class="box-dh fe j-c a-c f-c">
				<text class="yticon icon-you"></text>
				<text>1.3Km</text>
			</view>
		</view>
	</view>
</template>

<script>
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
export default {
	data() {
		return {
			src: 'https://img3.tuhu.org/Images/Marketing/Shops/Fjm8biaIeZvtb7R0r4uTkQZFTxPV_w721_h721.jpg@600h_99q.webp',
			info: [
				{
					content: '内容 A'
				},
				{
					content: '内容 B'
				},
				{
					content: '内容 C'
				}
			],
			current: 0,
			mode: 'nav'
		};
	},
	methods: {
		change(e) {
			this.current = e.detail.current;
		}
	},
	components: { uniSwiperDot }
};
</script>

<style lang="scss">
image {
	will-change: transform;
}
.header-text {
	.box-dh {
		width: 150rpx;
	}
}
</style>
